<template>
  <div class="edu-page-warp">
    <div class="edu-page-title">
      {{$t('commonParam.title')}}
      <el-button type="text" v-if="!tipsVisable" @click="tipsVisable=true">{{$t('commonParam.action.showDescript')}}</el-button>
      <el-button type="text" v-else @click="tipsVisable=false">{{$t('commonParam.action.hideDescript')}}</el-button>
      <p v-if="tipsVisable" style="font-size: x-small;margin: 5px 5px 0">
        {{$t('commonParam.descript.line1')}}
        <span style="color: #888888;">/commonservice/commonparam/value/{<span>{{$t('commonParam.paramCode')}}</span>}</span><br>
        {{$t('commonParam.descript.line2')}}<br>
        {{$t('commonParam.descript.line3')}}
      </p>
    </div>
    <el-card shadow="never">
      <el-container>
        <el-aside style="padding-bottom: 12px;" width="350px">
          <div class="edu-opertion-bar">
            <div class="float-left">
              <el-form :inline="true" class="bg-white">
                {{$t('commonParam.group.title')}}
              </el-form>
            </div>
            <div class="float-right">
              <el-button type="primary" size="mini" @click="startAddGroup"> {{$t('commonParam.action.addGroup')}}</el-button>
              <el-button  size="mini" icon="el-icon-refresh" @click="getAllGroups"></el-button>
              &nbsp;
            </div>
          </div>
          <el-table id="common-param-group"
                    :data="groupData" style="" max-height="480" :row-style="{cursor:'pointer'}"
                    :highlight-current-row="true" @current-change="changeGroup" tooltip-effect="light">
            <el-table-column prop="remark" :label="$t('commonParam.group.remark')" show-overflow-tooltip="true" min-width="100"> </el-table-column>
            <el-table-column prop="code" :label="$t('commonParam.group.code')" show-overflow-tooltip="true" min-width="100"> </el-table-column>
            <el-table-column :label="$t('commonParam.action.ops')" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click.stop="startEditGroup(scope)">{{$t('message.edit')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-aside >
        <el-main style="padding-bottom: 12px;">
          <el-button v-if="!currentGroup" plain disabled type="info"
                     class="disable-label">
            {{$t('commonParam.message.selectGroup')}}</el-button>
          <edu-common-param v-else @delete-group="deleteGroup" group-delete
                            :title="$t('commonParam.group.title')+': '+currentGroup.remark"
                            :group="currentGroup.code" style="margin: -20px 0 0;"/>
        </el-main>
      </el-container>
    </el-card>
    <el-dialog :title="editGroup.isAdd?$t('commonParam.action.addGroup'):$t('commonParam.action.editGroup')"
               :visible.sync="dialogEditGroup"
               width="340px" @close="cancelEditGroup">
      <el-form :model="editGroup">
        <el-form-item :label="$t('commonParam.group.remark')+':'" :label-width="'80px'" required>
          <el-input v-model.trim="editGroup.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('commonParam.group.code')+':'" :label-width="'80px'" required>
          <el-input v-model.trim="editGroup.code" autocomplete="off" @blur="checkGroupCode($event)"></el-input>
        </el-form-item>
        <p class="danger" v-if="editGroup.codeCheck">{{editGroup.codeCheck}}</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEditGroup">{{$t('message.cancel')}}</el-button>
        <el-button type="primary" @click="saveEditGroup"
                   :disabled="editGroup.code==null||editGroup.remark==null||editGroup.codeCheck">
          {{$t('message.confirm')}}
        </el-button>
      </div>
    </el-dialog>
      <a class="secret" @click="cacheManage=!cacheManage">cachemanage</a>
      <cacheManage v-if="cacheManage"></cacheManage>
  </div>
</template>
<script>
  import {
    getValue,
    getAllGroups,
    addGroup,
    updateGroup,
    deleteGroup,
    getParam,
    addParam,
    updateParam,
    deleteParam,
    pageParam,
    pageGroupParam
  } from "common/src/api/commonParam";
  import EduCommonParam from "../../../components/common/EduCommonParam";
  import cacheManage from "common/src/views/administrator/systemSettings/cacheMange.vue";

  export default {
    name: "CommonParam",
    components: {EduCommonParam,cacheManage},
    data() {
      return {
        tipsVisable:true,
        currentGroup : null,
        groupData : null,
        dialogEditGroup: false,
        editGroup:{
          index: null,
          oldCode:null,
          code: null,
          codeCheck: null,
          remark: null,
          isAdd: false
        },
        cacheManage: false
      };
    },
    mounted() {
      this.getAllGroups();
    },
    computed:{
      editParamCheck:function(){
        let param = this.editParam;

        return !(param.groupCode == null || param.type == null || param.remark == null || param.remark === ""
          || param.code == null || param.value == null || param.value === "" || param.codeCheck != null);

      }
    },
    methods:{
      getAllGroups: function(){
        getAllGroups().then((res)=>{
          if (res.code === 200) {
            this.groupData = res.data;
            this.currentGroup = null;
          }else{
            this.$message({
              type: "warning",
              message: res.msg
            });
          }
        });
      },
      changeGroup: function(currentRow){
        this.currentGroup = currentRow;
        this.page = {size:10, num:1, total:0}; // 选择参数组后重置page
        // if (currentRow)
        //   this.pageGroupParam();
      },
      deleteGroup: function(){
        let code = this.currentGroup.code;
        this.currentGroup = null;
        for (let i = 0; i < this.groupData.length; i++) {
          if (code === this.groupData[i].code) {
            this.groupData.splice(i, 1);
            break;
          }
        }
      },
      startEditGroup:function(scope){
        this.editGroup = {
          index:scope.$index,
          oldCode:scope.row.code,
          code:scope.row.code,
          remark:scope.row.remark,
          isAdd:false,
          codeCheck:null
        };
        this.dialogEditGroup = true;
      },
      startAddGroup:function(){
        this.editGroup = {index:null,oldCode:null,code:null,remark:null,isAdd:true,codeCheck:null};
        this.dialogEditGroup = true;
      },
      cancelEditGroup: function(){
        this.editGroup = {index:null,oldCode:null,code:null,remark:null,isAdd:false,codeCheck:null};
        this.dialogEditGroup = false;
      },
      saveEditGroup: function(){
        let callback = res=> {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: this.editGroup.isAdd?this.$t('message.addSuccess'):this.$t('message.editSuccess')
            });
            this.editGroup = {index:null,oldCode:null,code:null,remark:null,isAdd:false,codeCheck:null};
            this.dialogEditGroup = false;
            this.getAllGroups();
          } else {
            this.$message({
              type: "warning",
              message: res.message
            });
          }
        };
        let catchCallback = err =>{
          console.log(err);
          this.editGroup = {index:null,oldCode:null,code:null,remark:null,isAdd:false,codeCheck:null};
          this.dialogEditGroup = false;
        };
        if (this.editGroup.isAdd) {
          addGroup(this.editGroup).then(callback).catch(catchCallback);
        }else {
          updateGroup(this.editGroup.oldCode,this.editGroup).then(callback).catch(catchCallback);
        }

      },
      checkGroupCode: function(e){
        let code = e.target.value.trim();
        let index = this.editGroup.index;
        console.log("checkGroupCode",code,index);
        if (!/^[0-9a-zA-Z_]{1,20}$/.test(code)) {
          this.$set(this.editGroup,"codeCheck",this.$t('commonParam.message.codeIllegal'));
          return;
        }

        for(let i=0;i<this.groupData.length;i++){
          let group = this.groupData[i];
          if (index!==i && group.code === code) {
            this.$set(this.editGroup,"codeCheck",this.$t('commonParam.message.codeDup'));
            return;
          }
        }
        this.$set(this.editGroup,"codeCheck",null);
      },
    }

  };
</script>
<style>
  /* 在scoped中无法生效，必须是全局的，为了防止影响其它样式，加一个id*/
  #common-param-group .current-row *{
    background-color: #e8eaed;
    font-weight: bold;

  }
</style>
<style scoped>
  .secret{
    width:100px;height:10px;float:left;color:transparent
  }
  .secret:hover{
    color: #aaa!important;
  }
  .disable-label{
    height:100%;width:100%;font-size:x-large;color:#666;
  }
  .danger{
    color: #F56C6C;
  }
  .success{
    color: #67C23A;
  }
  .edit-param-check{
    margin-left: 80px;
    color: #F56C6C;
  }
</style>
